<template>
  <div>
    <div class="session_body">
      <div class="session_sidebox">
        <div class="logo">
          <div id="weixin"></div>
        </div>
<!--        <div class="title">Makabaka在线问卷填表平台</div>-->
<!--        <div class="recommend_block">-->
<!--          <p class="recommend_person">{{recommend.person}}</p>-->
<!--          <p class="recommend_text">{{recommend.text}}</p>-->
<!--        </div>-->
      </div>
      <div class="session_login_box">
        <div class="login_header">
          <div class="header_title">-登录-</div>
          <div class="header_regi">没有账号?<a href="javascript:;"> 点此注册!</a></div>
        </div>
        <el-form label-width="0px" class="login_form" :model="accountForm" ref="accountForm" :rules="rules">
          <el-form-item prop="username">
            <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="accountForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password" @keyup.enter.native="login">
            <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" show-password
                      v-model="accountForm.password"></el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input placeholder="请输入验证码" prefix-icon="el-icon-user" v-model="accountForm.code"></el-input>
            <el-image :src="accountForm.img" @click="getCaptchaImage" class="login-code-img"></el-image>
          </el-form-item>

          <el-form-item class="btns">
            <el-button type="primary" @click="login" round class="login_btn">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import '@/utils/winxinLogin.js'
  import '@/mock'
  import { mapMutations } from 'vuex'

  export default {
    name: 'login',
    data() {
      return {
        accountForm: {
          username: '',
          password: '',
          code: '',
          uuid: '',
          img: ''
        },
        rules: {
          username: [{
            required: true,
            message: '不得为空',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '不得为空',
            trigger: 'blur'
          }]
        },
        recommend: {
          person: '',
          text: ''
        },
        persons: [
          '王俊飞  -  玛卡巴卡问卷第一个用户',
          '黄争艳  -  玛卡巴卡问卷第二个用户',
          '来炜宁  -  玛卡巴卡问卷第三个用户'
        ],
        texts: [
          // '"玛卡巴卡问卷的名字，是我见过最短的情诗"',
          // '"相遇是春风十里 原来是玛卡巴卡问卷 相爱是山长水阔 最后是玛卡巴卡问卷"',
          // '"玛卡巴卡问卷,用过都说好"',
          // '"星尘是宇宙的披风，而玛卡巴卡问卷是宇宙中最美好的生命体"',
          // '"玛卡巴卡填问卷是怎么回事呢？玛卡巴卡相信大家都很熟悉，但是玛卡巴卡填问卷是怎么回事呢，下面就让小编带大家一起了解吧。玛卡巴卡填问卷，其实就是玛卡巴卡问卷，大家可能会很惊讶玛卡巴卡怎么会填问卷呢？但事实就是这样，小编也感到非常惊讶。"',
          // '"玛卡巴卡问卷，到底应该如何实现。 现在，解决玛卡巴卡问卷的问题，是非常非常重要的。 所以， 一般来说， 这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。 黑格尔在不经意间这样说过，只有永远躺在泥坑里的人，才不会再掉进坑里。这句话语虽然很短，但令我浮想联翩。"',
          // '"吉姆·罗恩曾经说过，要么你主宰生活，要么你被生活主宰。这启发了我， 文森特·皮尔曾经说过，改变你的想法，你就改变了自己的世界。带着这句话，我们还要更加慎重的审视这个问题： 所谓玛卡巴卡问卷，关键是玛卡巴卡问卷需要如何写。 罗素·贝克在不经意间这样说过，一个人即使已登上顶峰，也仍要自强不息。这不禁令我深思。"'

        ],
        userToken: '',
        obj: {}
      }
    },
    created() {
      this.getRandomRecommend()
      this.getCaptchaImage()
    },
    mounted() {
      this.initWX()
    },

    methods: {
      ...mapMutations(['changeLogin']),
      login: function () {
        const _this = this
        console.log(this.accountForm)
        this.$refs.accountForm.validate(async (valid) => {
          if (!valid) {
            return
          }
          try {
            const {
              data: res
            } = await this.$http.post_login('/doLogin', _this.accountForm)

            console.log('res', res.data.password)
            _this.userToken = 'Bearer ' + res.data
            _this.changeLogin({Authorization: _this.userToken})
            this.$message.success('登陆成功')
            window.sessionStorage.setItem('password', res.data.password)
            window.sessionStorage.setItem('username', res.data.username)
            window.sessionStorage.setItem('id', res.data.id)
            await this.$router.push('/index/myProject')
          } catch (e) {
            this.$message.error('登录失败')
            console.log(e)
          }
        })

      },
      getRandomRecommend: function () {
        const indexP = Math.floor(Math.random() * this.persons.length)
        const indexT = Math.floor(Math.random() * this.texts.length)
        this.recommend.person = this.persons[indexP]
        this.recommend.text = this.texts[indexT]

      },
      getCaptchaImage: function () {
        this.$http.get('/captchaImage').then(res => {
          this.accountForm.uuid = res.data.data.uuid
          this.accountForm.img = 'data:image/png;base64,' + res.data.data.img
        })
      },
      initWX: function () {
        this.obj = new WwLogin({
          id: 'weixin',
          appid: 'ww5eff4f8ad7ab9a02',
          agentid: '1000003',
          // 扫码成功后 跳转的地址
          redirect_uri: encodeURIComponent('http://3fe9742234.qicp.vip/index/start'),
          state: '',
          href: '',
          lang: 'zh'
        })
      },
      getWXUserInfo: function (code) {
        this.$http.get('/wxLogin?code=' + code).then(res => {
          console.log(res, code)
          this.$router.push('/index/start')
        })
      }
    },
    watch: {
      $route(to) {
        if (to.query.code) {
          // methods中调接口的方法
          console.log('------')
          this.getWXUserInfo(to.query.code)
        }
      }
    }

  }

</script>

<style lang="less" scoped>
  @import "src/assets/css/themeColor";

  * {
    box-sizing: border-box;

  }
  #weixin {
    width: 20px;
    height: 20px;
    background-color: #8fc2c9;
    z-index: 100;
  }
  .session_body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 60vw;
    height: 80vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    // background-color: #666;
    box-shadow: 5px 0 50px #ccc;
    border: 1px #eee solid;
    border-radius: 10px;
    /*overflow: hidden;*/
  }

  // .session_sidebox {
  //     width: 50%;
  //     height: 100%;
  //     float: left;
  //     padding: 100px 50px;
  //     background-color: #aaa;
  // }

  // .session_sidebox,
  // .session_login_box {
  //     position: relative;
  //     float: left;
  //     width: 50%;
  //     height: 100%;
  //     padding: 80px 50px;
  //     // overflow: hidden;
  // }
  .session_sidebox {
    width: 50%;
    flex-grow: 0;
    padding: 80px 50px;

  }

  .session_login_box {
    flex-grow: 1;
    padding: 80px 50px;
    // overflow: hidden;
  }

  .session_sidebox {
    background-color: rgb(70, 84, 105);
    color: #fff;

    .title {
      font-size: 22px;
      font-weight: 400;
      margin-bottom: 40px;
    }
  }

  .login_header {
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin-bottom: 30px;
  }

  .header_title {
    float: left;
    font-size: 26px;
    font-weight: 800;
    margin-right: 20px;
  }

  .header_regi {
    float: right;
  }

  .login_form {
    margin-bottom: 20px;
    top: 50%;
    width: 100%;
  }

  .btns {
    margin-top: 30px;
  }

  .login_btn {
    width: 100%;
  }

  .logo {
    height: 40px;
    margin-bottom: 30px;

    img {
      height: 40px;
      width: 100%;
    }
  }

  .recommend_block {
    .recommend_person {
      color: #bbb;
      font-size: 14px;
      margin-bottom: 20px;
    }

    .recommend_text {
      font-size: 16px;
    }
  }
</style>
